<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-11-18 11:00:05
 * 文字解析模块
-->
<template>
	<div :class="{ 'noWarp': !textAttr.warp }">
		<span :style="style">{{ cusText || textAttr.text }}</span>
	</div>
</template>

<script>
export default {
	name: 'moduleText',
	props: {
		textAttr: {	//文字对象,包含样式和文字内容
			type: Object,
			required: true,
			default: {}
		},
		cusText: {	//自定义的文字内容,优先级最高
			type: [String, Number],
			default: ''
		},
		defStyle: {	//默认的文字样式
			type: Object,
			defautl: {}
		}
	},
	computed: {
		style() {
			if (this.$util.emptyObj(this.textAttr)) return ''
			if (this.textAttr.customer) {	//使用自定义文字样式
				const { fontSize, fontColor, b, i, u } = this.textAttr
				const style = {
					fontSize: fontSize + 'px',
					color: fontColor
				}
				if (b) {
					style.fontWeight = 'bold';
				}
				if (i) {
					style.fontStyle = 'italic';
				}
				if (u) {
					style.textDecoration = 'underline';
				}
				return style;
			} else {	//使用默认文字样式
				if (this.$util.emptyObj(this.defStyle)) return ''
				const { fontSize, fontColor, b, i, u } = this.defStyle
				const style = {
					fontSize: fontSize + 'px',
					color: fontColor
				}
				if (b) {
					style.fontWeight = 'bold';
				}
				if (i) {
					style.fontStyle = 'italic';
				}
				if (u) {
					style.textDecoration = 'underline';
				}
				return style;
			}
		}
	}
};
</script>

<style scoped>
.noWarp {
	white-space: nowrap;
}
</style>
